<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
	</head>
	<style>
		body{
			margin: 0 auto;
			background: pink;
		}
		#wrap{
			height: 450px;
			background-size: 800px 450px;
			position: relative;
			transform-style: preserve-3d;
			perspective: 800px;
			margin-top: 100px;
		}
		img{
			border:none;
			vertical-align: top;
		}
		#wrap img{
			width: 300px;
			height: 200px;
			position: absolute;
			left: 50%;
			top:50%;
			margin-left: -150px;
			margin-top: -100px;
			transition: .7s ease-in-out;
			border-radius: 5px;
			box-shadow: 0px 1px 2px #000000;
		}
	</style>
	<body>
		<div id="wrap">
			<img src="../../images/0.jpg" />
			<img src="../../images/1.jpg" />
			<img src="../../images/2.jpg" />
			<img src="../../images/3.jpg" />
			<img src="../../images/4.jpg" />
			<img src="../../images/5.jpg" />
			<img src="../../images/6.jpg" />
		</div>
		<script>
			var imgs = document.getElementsByTagName("img");
			var now = 3
			var target;
			var onoff = true;
			setTimeout(function(){
				tab(now);
			},100);
			for( var i = 0; i<imgs.length; i++){
				imgs[i].index = i;
				imgs[i].onclick = function(){
					if( !onoff ){
						return;
					};
					onoff = false;
					target = this.index;
					if( target > now ){
						if( target - now <= 3 ){
							goNext();
						}else{
							goPrve();
						};
					}else{
						if( target + 7 - now <= 3 ){
							goNext();
						}else{
							goPrve();
						}
					}
					
				};
			};
			function goNext(){
				now++;
				if( now > 6 ){
					now = 0;
				}
				tab(now);
				if( now == target ){
					onoff = true;
					return;
				}
				setTimeout(function(){
					goNext();
				},700)
			};
			function goPrve(){
				now--;
				if( now < 0 ){
					now = 6;
				};
				tab(now);
				if( now == target ){
					onoff = true;
					return;
				}
				setTimeout(function(){
					goPrve();
				},700)
			}
			function tab(n){
				for(var i = 0; i < 3; i++){
					var left = n - 1 - i;
					if( left < 0 ){
						left = left + 7;
					}
					imgs[left].style.transform = 
					"translateX("+ (-150*(i+1)) +"px) translateZ("+ (200-i*100) +"px) rotateY(30deg)";
					var right = n + 1 + i;
					if( right > 6 ){
						right = right - 7;
					};
					imgs[right].style.transform = 
					"translateX("+ (150*(i+1)) +"px) translateZ("+ (200-i*100) +"px) rotateY(-30deg)";
				};
				imgs[n].style.transform = "translateZ(300px)";
			};
		</script>
	</body>
</html>
